<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form">
        <h2>重置密码</h2>
        <a-form :model="resetForm" @finish="handleFinish">
          <div>
            <a-form-item
              name="email"
              :rules="[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '请输入有效的邮箱地址' },
              ]"
            >
              <a-input
                v-model:value="resetForm.email"
                placeholder="请输入注册时的邮箱"
              />
            </a-form-item>

            <a-form-item
              v-if="showVerificationCode"
              name="verificationCode"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <div class="verification-code-input">
                <a-input
                  v-model:value="resetForm.verificationCode"
                  placeholder="请输入验证码"
                />
                <a-button
                  :disabled="countdown > 0"
                  @click="sendVerificationCode"
                >
                  {{ countdown > 0 ? `${countdown}s后重试` : "获取验证码" }}
                </a-button>
              </div>
            </a-form-item>

            <a-form-item
              v-if="showNewPassword"
              name="newPassword"
              :rules="[
                { required: true, message: '请输入新密码' },
                { min: 6, message: '密码长度不能小于6位' },
              ]"
            >
              <a-input-password
                v-model:value="resetForm.newPassword"
                placeholder="请输入新密码"
              />
            </a-form-item>

            <a-form-item
              v-if="showNewPassword"
              name="confirmPassword"
              :rules="[
                { required: true, message: '请确认新密码' },
                { validator: validateConfirmPassword },
              ]"
            >
              <a-input-password
                v-model:value="resetForm.confirmPassword"
                placeholder="请确认新密码"
              />
            </a-form-item>
          </div>
          <div class="form-footer">
            <a class="back-to-login" @click="backToLogin">返回登录</a>
            <a-button type="primary" html-type="submit" class="submit-button">
              {{ submitButtonText }}
            </a-button>
          </div>
        </a-form>
      </div>
      <div class="info-box">
        <h3>找回密码</h3>
        <p>请输入您注册时使用的邮箱，我们将向该邮箱发送验证码。</p>
        <p>通过验证后，您可以重新设置密码。</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

const router = useRouter();
const resetForm = reactive({
  email: "",
  verificationCode: "",
  newPassword: "",
  confirmPassword: "",
});

const showVerificationCode = ref(false);
const showNewPassword = ref(false);
const countdown = ref(0);

// 根据当前步骤显示不同的提交按钮文字
const submitButtonText = computed(() => {
  if (!showVerificationCode.value) return "下一步";
  if (!showNewPassword.value) return "验证";
  return "重置密码";
});

// 验证确认密码
const validateConfirmPassword = async (_rule: any, value: string) => {
  if (value !== resetForm.newPassword) {
    throw new Error("两次输入的密码不一致");
  }
};

// 发送验证码
const sendVerificationCode = async () => {
  try {
    // TODO: 调用发送验证码的API
    message.success("验证码已发送到您的邮箱");
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    message.error("验证码发送失败，请重试");
  }
};

// 处理表单提交
const handleFinish = async () => {
  try {
    if (!showVerificationCode.value) {
      // 第一步：验证邮箱
      // TODO: 调用验证邮箱是否存在的API
      showVerificationCode.value = true;
      await sendVerificationCode();
    } else if (!showNewPassword.value) {
      // 第二步：验证验证码
      // TODO: 调用验证验证码的API
      showNewPassword.value = true;
    } else {
      // 第三步：重置密码
      // TODO: 调用重置密码的API
      message.success("密码重置成功！");
      router.push("/login");
    }
  } catch (error) {
    message.error("操作失败，请重试");
  }
};

const backToLogin = () => {
  router.push("/login");
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("@/assets/images/screen.png");
  background-size: cover;
  padding: 20px;
}

.login-box {
  display: flex;
  border-radius: 15px;
  overflow: hidden;
  width: 800px;
  min-height: 500px;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.login-form {
  flex: 1;
  padding: 120px 50px 50px 50px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.info-box {
  flex: 1;
  background: linear-gradient(
    135deg,
    rgba(242, 110, 112, 0.9) 0%,
    rgba(255, 19, 101, 0.9) 100%
  );
  backdrop-filter: blur(7px);
  color: white;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h2 {
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.info-box h3 {
  color: white;
  margin-bottom: 30px;
  font-size: 35px;
}

.info-box p {
  color: white;
  margin-bottom: 20px;
  font-size: 16px;
  text-align: center;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.back-to-login {
  color: #666;
  transition: color 0.3s;
}

.back-to-login:hover {
  color: #ff4d4f;
}

.submit-button {
  background: #ff4d4f;
  border-color: #ff4d4f;
  width: 120px;
  height: 40px;
  font-size: 16px;
}

.submit-button:hover {
  background: #ff7875;
  border-color: #ff7875;
}

.verification-code-input {
  display: flex;
  gap: 10px;
}

.verification-code-input :deep(.ant-input) {
  flex: 1;
}

:deep(.ant-input),
:deep(.ant-input-password) {
  height: 40px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
}

:deep(.ant-input-password .ant-input) {
  height: 38px;
  background: transparent;
}

:deep(.ant-form-item) {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .login-box {
    flex-direction: column;
    width: 100%;
    max-width: 500px;
  }

  .login-form,
  .info-box {
    width: 100%;
    padding: 30px;
  }
}
</style>
